contentShape#

The contentShape property defines the interactive or visual boundary shape of a view's content. This shape can influence how a view behaves during interactions such as tapping, dragging, accessibility focus, hover effects, and previews. It is commonly used to fine-tune the hit-testing area or provide a custom visual outline for advanced interaction features.

This is especially useful for views like Button, ListRow, or custom views where the tappable or interactive area should differ from the visual content.

Definition#

1contentShape?: Shape | {
2  kind: ContentShapeKinds
3  shape: Shape
4}

Supported Formats#

1. Simple Shape#

You can specify a standalone Shape to define the default content shape for all purposes.

1contentShape="circle"

This applies to all interactions (tap, accessibility, drag, etc.) unless overridden.

2. Typed Shape by Purpose#

You can define a content shape with a specific interaction kind, using the following structure:

1{
2  kind: ContentShapeKinds
3  shape: Shape
4}

This lets you control the content shape behavior in specific contexts (e.g., drag previews or accessibility hit-testing).

Supported ContentShapeKinds#

Examples#

Default shape for all interactions#

1<Button
2  title="Click Me"
3  contentShape="capsule"
4  action={() => {
5
6  }}
7/>

Custom shape for accessibility only#

1<Button
2  title="Accessible Button"
3  action={() => {
4
5  }}
6  contentShape={{
7    kind: "accessibility",
8    shape: {
9      type: "rect",
10      cornerRadius: 12
11    }
12  }}
13/>

Custom interaction area using an ellipse#

1<Text
2  contentShape={{
3    kind: "interaction",
4    shape: "ellipse"
5  }}
6>
7  Custom Tap Area
8</Text>

Notes#

• contentShape does not alter how the view looks, only how it responds to interactions or previews.
• When using custom shapes, ensure the shape aligns appropriately with the view’s layout frame.
• For symbol-based views (e.g., buttons with icons), defining a contentShape can make tap targets more accessible.